

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>Vue.js</title>
    <meta charset="utf-8">
    <meta name="description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="alternate" hreflang="x-default" href="https://vuejs.org/coc/index.html">
    <link rel="alternate" hreflang="zh" href="index.html">
    <link rel="alternate" hreflang="ja" href="https://jp.vuejs.org/coc/index.html">
    <link rel="alternate" hreflang="ru" href="https://ru.vuejs.org/coc/index.html">
    <link rel="alternate" hreflang="ko" href="https://kr.vuejs.org/coc/index.html">
    <link rel="alternate" hreflang="pt-BR" href="https://br.vuejs.org/coc/index.html">
    <link rel="alternate" hreflang="fr" href="https://fr.vuejs.org/coc/index.html">

    <meta property="og:type" content="article">
    <meta property="og:title" content="Vue.js">
    <meta property="og:description" content="Vue.js - The Progressive JavaScript Framework">
    <meta property="og:image" content="https://cn.vuejs.org//images/logo.png">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Vue.js">
    <meta name="twitter:description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="twitter:image" content="https://cn.vuejs.org/images/logo.png">

    <link rel="apple-touch-icon" sizes="57x57" href="../images/icons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="../images/icons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="../images/icons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="../images/icons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="../images/icons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="../images/icons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="../images/icons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="../images/icons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="../images/icons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="../images/icons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../images/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="../images/icons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../images/icons/favicon-16x16.png">
    <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
    <link rel="icon" href="../images/logo.png" type="image/png">

    <meta name="msapplication-TileColor" content="#4fc08d">
    <meta name="theme-color" content="#4fc08d">

    <meta name="msapplication-config" content="browserconfig.xml">
    <link rel="manifest" href="../manifest.json">

    <!-- <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->
    <!-- <link href='//fonts.googleapis.com/css?family=Dosis:500&text=Vue.js' rel='stylesheet' type='text/css'> -->

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- main page styles -->
    <link rel="stylesheet" href="../css/page.css">

    <!-- this needs to be loaded before guide's inline scripts -->
    <script src="../js/vue.js"></script>
    <script>
      Vue.config.productionTip = false
      window.PAGE_TYPE = ""
    </script>

    <!-- ga -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-46852172-3', 'cn.vuejs.org');
      ga('send', 'pageview');
    </script>
  </head>
  <body class="docs">
    <div id="mobile-bar" >
      <a class="menu-button"></a>
      <a class="logo" href="../index.html"></a>
    </div>
    <div id="header">
  <a id="logo" href="../index.html">
    <img src="../images/logo.png" alt="vue logo">
    <span>Vue.js</span>
  </a>
  <ul id="nav">
    <li>
  <form id="search-form">
    <input type="text" id="search-query-nav" class="search-query st-default-search-input">
  </form>
</li>
<li class="nav-dropdown-container learn">
  <a class="nav-link">学习</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="../v2/guide/index.html" class="nav-link">教程</a></li>
      <li><a href="../v2/api/index.html" class="nav-link">API</a></li>
      <li><a href="../v2/style-guide/index.html" class="nav-link">风格指南</a></li>
      <li><a href="../v2/examples/index.html" class="nav-link">示例</a></li>
      <li><a href="../v2/cookbook/index.html" class="nav-link">Cookbook</a></li>
    </ul></li>
  </ul>
</li>

<li class="nav-dropdown-container ecosystem">
  <a class="nav-link">生态系统</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>帮助</h4></li>
    <li><ul>
      <li><a href="https://forum.vuejs.org/" class="nav-link" target="_blank">论坛</a></li>
      <li><a href="https://chat.vuejs.org/" class="nav-link" target="_blank">聊天室</a></li>
      <li><a href="https://www.vuemeetups.org/" class="nav-link" target="_blank">聚会</a></li>
    </ul></li>
    <li><h4>工具</h4></li>
    <li>
      <ul>
        <li><a href="https://github.com/vuejs/vue-devtools" class="nav-link" target="_blank">Devtools</a></li>
        <li><a href="https://cli.vuejs.org/" class="nav-link" target="_blank">Vue CLI</a></li>
        <li><a href="https://vue-loader.vuejs.org" class="nav-link" target="_blank">Vue Loader</a></li>
      </ul>
    </li>
    <li><h4>核心插件</h4></li>
    <li><ul>
      <li><a href="https://router.vuejs.org/" class="nav-link" target="_blank">Vue Router</a></li>
      <li><a href="https://vuex.vuejs.org/" class="nav-link" target="_blank">Vuex</a></li>
      <li><a href="https://ssr.vuejs.org/" class="nav-link" target="_blank">Vue 服务端渲染</a></li>
    </ul></li>
    <li><h4>信息</h4></li>
    <li><ul>
      <li><a href="https://news.vuejs.org" class="nav-link" target="_blank">周刊</a></li>
      <li><a href="https://github.com/vuejs/roadmap" class="nav-link" target="_blank">Roadmap</a></li>
      <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
      <li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank">博客</a></li>
      <li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank">工作</a></li>
    </ul></li>
    <li><h4>资源列表</h4></li>
    <li><ul>
      <li><a href="https://github.com/vuejs" class="nav-link" target="_blank">官方仓库</a></li>
      <li><a href="https://curated.vuejs.org/" class="nav-link" target="_blank">Vue 优选</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank">Vue 资源</a></li>
    </ul></li>
  </ul>
</li>

<li>
  <a href="../v2/guide/team.html" class="nav-link team">团队</a>
</li>
<li class="nav-dropdown-container support-vue">
  <a href="../support-vuejs/index.html" class="nav-link">支持 Vue</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="../support-vuejs/index.html#One-time-Donations" class="nav-link">一次性赞助</a></li>
      <li><a href="../support-vuejs/index.html#Recurring-Pledges" class="nav-link">周期性赞助</a></li>
      <li><a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" class="nav-link">贴纸</a></li>
      <li><a href="https://vue.threadless.com" target="_blank" class="nav-link">T 恤商店</a></li>
    </ul></li>
  </ul>
</li>

<li class="nav-dropdown-container language">
  <a class="nav-link">多语言</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://vuejs.org/coc/index.html" class="nav-link" target="_blank">English</a></li>
    <li><a href="https://jp.vuejs.org/coc/index.html" class="nav-link" target="_blank">日本語</a></li>
    <li><a href="https://ru.vuejs.org/coc/index.html" class="nav-link" target="_blank">Русский</a></li>
    <li><a href="https://kr.vuejs.org/coc/index.html" class="nav-link" target="_blank">한국어</a></li>
    <li><a href="https://br.vuejs.org/coc/index.html" class="nav-link" target="_blank">Português</a></li>
    <li><a href="https://fr.vuejs.org/coc/index.html" class="nav-link" target="_blank">Français</a></li>
    <li><a href="https://vi.vuejs.org/coc/index.html" class="nav-link" target="_blank">Tiếng Việt</a></li>
  </ul>
</li>

<li><a href="https://github.com/vuejs/cn.vuejs.org/" target="_blank" class="nav-link contribute">参与翻译</a></li>

  </ul>
</div>

    
      <div id="main" class="fix-sidebar">
        
          
  <div class="sidebar">
    <ul class="main-menu">
      <li>
  <form id="search-form">
    <input type="text" id="search-query-sidebar" class="search-query st-default-search-input">
  </form>
</li>
<li class="nav-dropdown-container learn">
  <a class="nav-link">学习</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="../v2/guide/index.html" class="nav-link">教程</a></li>
      <li><a href="../v2/api/index.html" class="nav-link">API</a></li>
      <li><a href="../v2/style-guide/index.html" class="nav-link">风格指南</a></li>
      <li><a href="../v2/examples/index.html" class="nav-link">示例</a></li>
      <li><a href="../v2/cookbook/index.html" class="nav-link">Cookbook</a></li>
    </ul></li>
  </ul>
</li>

<li class="nav-dropdown-container ecosystem">
  <a class="nav-link">生态系统</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>帮助</h4></li>
    <li><ul>
      <li><a href="https://forum.vuejs.org/" class="nav-link" target="_blank">论坛</a></li>
      <li><a href="https://chat.vuejs.org/" class="nav-link" target="_blank">聊天室</a></li>
      <li><a href="https://www.vuemeetups.org/" class="nav-link" target="_blank">聚会</a></li>
    </ul></li>
    <li><h4>工具</h4></li>
    <li>
      <ul>
        <li><a href="https://github.com/vuejs/vue-devtools" class="nav-link" target="_blank">Devtools</a></li>
        <li><a href="https://cli.vuejs.org/" class="nav-link" target="_blank">Vue CLI</a></li>
        <li><a href="https://vue-loader.vuejs.org" class="nav-link" target="_blank">Vue Loader</a></li>
      </ul>
    </li>
    <li><h4>核心插件</h4></li>
    <li><ul>
      <li><a href="https://router.vuejs.org/" class="nav-link" target="_blank">Vue Router</a></li>
      <li><a href="https://vuex.vuejs.org/" class="nav-link" target="_blank">Vuex</a></li>
      <li><a href="https://ssr.vuejs.org/" class="nav-link" target="_blank">Vue 服务端渲染</a></li>
    </ul></li>
    <li><h4>信息</h4></li>
    <li><ul>
      <li><a href="https://news.vuejs.org" class="nav-link" target="_blank">周刊</a></li>
      <li><a href="https://github.com/vuejs/roadmap" class="nav-link" target="_blank">Roadmap</a></li>
      <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
      <li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank">博客</a></li>
      <li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank">工作</a></li>
    </ul></li>
    <li><h4>资源列表</h4></li>
    <li><ul>
      <li><a href="https://github.com/vuejs" class="nav-link" target="_blank">官方仓库</a></li>
      <li><a href="https://curated.vuejs.org/" class="nav-link" target="_blank">Vue 优选</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank">Vue 资源</a></li>
    </ul></li>
  </ul>
</li>

<li>
  <a href="../v2/guide/team.html" class="nav-link team">团队</a>
</li>
<li class="nav-dropdown-container support-vue">
  <a href="../support-vuejs/index.html" class="nav-link">支持 Vue</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="../support-vuejs/index.html#One-time-Donations" class="nav-link">一次性赞助</a></li>
      <li><a href="../support-vuejs/index.html#Recurring-Pledges" class="nav-link">周期性赞助</a></li>
      <li><a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" class="nav-link">贴纸</a></li>
      <li><a href="https://vue.threadless.com" target="_blank" class="nav-link">T 恤商店</a></li>
    </ul></li>
  </ul>
</li>

<li class="nav-dropdown-container language">
  <a class="nav-link">多语言</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://vuejs.org/coc/index.html" class="nav-link" target="_blank">English</a></li>
    <li><a href="https://jp.vuejs.org/coc/index.html" class="nav-link" target="_blank">日本語</a></li>
    <li><a href="https://ru.vuejs.org/coc/index.html" class="nav-link" target="_blank">Русский</a></li>
    <li><a href="https://kr.vuejs.org/coc/index.html" class="nav-link" target="_blank">한국어</a></li>
    <li><a href="https://br.vuejs.org/coc/index.html" class="nav-link" target="_blank">Português</a></li>
    <li><a href="https://fr.vuejs.org/coc/index.html" class="nav-link" target="_blank">Français</a></li>
    <li><a href="https://vi.vuejs.org/coc/index.html" class="nav-link" target="_blank">Tiếng Việt</a></li>
  </ul>
</li>

<li><a href="https://github.com/vuejs/cn.vuejs.org/" target="_blank" class="nav-link contribute">参与翻译</a></li>

    </ul>
  </div>

<div class="content  ">
  
  

  <div class="ad-pagetop">
  <a href="http://www.tp-shop.cn/index.php?http_referer=vuejs" target="_blank" rel="noopener noreferrer">
    <span class="name">TPshop</span>
    <span class="description">中国开源商城系统 - 开源学习系统</span>
    <span class="action">立即查看 &gt;</span>
  </a>
</div>


  
    <h1 id="Code-Of-Conduct"><a href="index.html#Code-Of-Conduct" class="headerlink" title="Code Of Conduct"></a>Code Of Conduct</h1><h2 id="Our-Pledge"><a href="index.html#Our-Pledge" class="headerlink" title="Our Pledge"></a>Our Pledge</h2><p>In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, political party, or sexual identity and orientation. Note, however, that religion, political party, or other ideological affiliation provide no exemptions for the behavior we outline as unacceptable in this Code of Conduct.</p>
<h2 id="Our-Standards"><a href="index.html#Our-Standards" class="headerlink" title="Our Standards"></a>Our Standards</h2><p>Examples of behavior that contributes to creating a positive environment include:</p>
<ul>
<li>Using welcoming and inclusive language</li>
<li>Being respectful of differing viewpoints and experiences</li>
<li>Gracefully accepting constructive criticism</li>
<li>Focusing on what is best for the community</li>
<li>Showing empathy towards other community members</li>
</ul>
<p>Examples of unacceptable behavior by participants include:</p>
<ul>
<li>The use of sexualized language or imagery and unwelcome sexual attention or advances</li>
<li>Trolling, insulting/derogatory comments, and personal or political attacks</li>
<li>Public or private harassment</li>
<li>Publishing others’ private information, such as a physical or electronic address, without explicit permission</li>
<li>Other conduct which could reasonably be considered inappropriate in a professional setting</li>
</ul>
<h2 id="Our-Responsibilities"><a href="index.html#Our-Responsibilities" class="headerlink" title="Our Responsibilities"></a>Our Responsibilities</h2><p>Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.</p>
<p>Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.</p>
<h2 id="Scope"><a href="index.html#Scope" class="headerlink" title="Scope"></a>Scope</h2><p>This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.</p>
<h2 id="Enforcement"><a href="index.html#Enforcement" class="headerlink" title="Enforcement"></a>Enforcement</h2><p>Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at <a href="mailto:vuejscommunity@gmail.com" target="_blank" rel="noopener">vuejscommunity@gmail.com</a>. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.</p>
<p>Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project’s leadership.</p>
<h2 id="Attribution"><a href="index.html#Attribution" class="headerlink" title="Attribution"></a>Attribution</h2><p>This Code of Conduct is adapted from the <a href="https://www.contributor-covenant.org" target="_blank" rel="noopener">Contributor Covenant</a>, version 1.4, available at <a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct.html" target="_blank" rel="noopener">https://www.contributor-covenant.org/version/1/4/code-of-conduct.html</a></p>

  
  
  <div class="footer">
      <script src="https://m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<div class="bsa-cpc"></div>
<script>
  (function(){
    if(typeof _bsa !== 'undefined' && _bsa) {
    _bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', {
      target: '.bsa-cpc',
      align: 'horizontal',
      disable_css: 'true'
    });
      }
  })();
</script>

    发现错误？想参与编辑？
    <a href="https://github.com/vuejs/cn.vuejs.org/blob/master/src/coc/index.md" target="_blank">
      在 GitHub 上编辑此页！
    </a>
  </div>
</div>

        
      </div>
      <script src="../js/smooth-scroll.min.js"></script>
    

    <!-- main custom script for sidebars, version selects etc. -->
    <script src="../js/css.escape.js"></script>
    <script src="../js/common.js"></script>

    <!-- search -->
    <link href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="../css/search.css">
    <script src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
    <script>
    [
      '#search-query-nav',
      '#search-query-sidebar',
      '#search-query-menu'
    ].forEach(function (selector) {
      if (!document.querySelector(selector)) return
      // search index defaults to v2
      var match = window.location.pathname.match(/^\/(v\d+)/)
      var version = match ? match[1] : 'v2'
      docsearch({
      appId: 'BH4D9OD16A',
      apiKey: '5638280abff9d207417bb03be05f0b25',
      indexName: 'vuejs_cn2',
      inputSelector: selector,
      algoliaOptions: { facetFilters: ["version:" + version] }
      })
    })
    </script>

    <!-- fastclick -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
      FastClick.attach(document.body)
    }, false)
    </script>
  </body>
</html>
